<template>
  <div class="pref" th:if="${!empty session.myList}">
    <p style="font-family: huayuan;color: rgb(190, 158, 111);">您的偏好</p>
    <ul th:each="product,items:${session.myList}">
      <li>
        <a href="productForm?productId=${product.productId}">${product.name}</a>
        (${product.productId})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "includeMyList"
}
</script>

<style scoped>
@font-face {
  font-family: 'huayuan';
  src: url("../assets/font/花园肉丸.ttf");
}

.pref{
  /*opacity: 90%;*/
  /*background-color: white;*/
  width: 180px;
  max-height: 500px;
  overflow-y: auto;
  background-color: rgb(255, 255, 255);
  opacity: 70%;
  position: absolute; left: 4%; top: 18%;
  font-size: 26px;
  border: solid 2px black;
}

.pref li{
  font-size: 16px;
  list-style: upper-roman;
}

.pref a:hover{
  color: saddlebrown;
}
</style>